<route lang="json5" type="page">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTextStyle: 'white',
    navigationBarTitleText: '注册',
  },
}
</route>

<template>
  <view class="accountBox">
    <cu-login title="你好！" subTit="请注册账号">
      <view>
        <uv-form ref="uForm" :model="registerForm" :rules="rules">
          <uv-form-item label="昵称" prop="nickname" borderBottom labelWidth="160rpx">
            <uv-input
              v-model="registerForm.nickname"
              placeholder="请输入昵称"
              border="none"
              clearable
            />
          </uv-form-item>
          <uv-form-item
            label="真实姓名"
            prop="name"
            borderBottom
            labelWidth="160rpx"
            customStyle="margin-top:24rpx"
          >
            <uv-input
              v-model="registerForm.name"
              placeholder="请输入真实姓名"
              border="none"
              clearable
            />
          </uv-form-item>
          <uv-form-item
            label="手机号"
            prop="contact"
            borderBottom
            labelWidth="160rpx"
            customStyle="margin-top:24rpx"
          >
            <uv-input
              v-model.number="registerForm.contact"
              placeholder="请输入手机号"
              border="none"
              type="number"
              clearable
            />
          </uv-form-item>
          <uv-form-item
            label="密码"
            prop="password1"
            borderBottom
            customStyle="margin-top:24rpx"
            labelWidth="160rpx"
          >
            <uv-input
              v-model="registerForm.password1"
              type="password"
              placeholder="请输入密码"
              border="none"
              clearable
            ></uv-input>
          </uv-form-item>
          <uv-form-item
            label="确认密码"
            prop="password2"
            borderBottom
            customStyle="margin-top:24rpx"
            labelWidth="160rpx"
          >
            <uv-input
              v-model="registerForm.password2"
              type="password"
              placeholder="请输入密码"
              border="none"
              clearable
            ></uv-input>
          </uv-form-item>
          <uv-form-item
            label="食堂"
            prop="unitName"
            @click="showAction"
            borderBottom
            customStyle="margin-top:30rpx"
            labelWidth="160rpx"
          >
            <uv-input
              v-model="registerForm.unitName"
              disabled
              disabledColor="#ffffff"
              placeholder="请选择食堂"
              border="none"
            ></uv-input>
            <template v-slot:right>
              <uv-icon name="arrow-right"></uv-icon>
            </template>
          </uv-form-item>
          <uv-button
            shape="circle"
            color="#00754A"
            customStyle="margin-top: 77rpx;height:92rpx;"
            @click="register"
            :disabled="disabled"
          >
            <span style="font-size: 31rpx">注册</span>
          </uv-button>
        </uv-form>
        <uv-picker
          ref="selectRef"
          color="#000000"
          activeColor="#00754A"
          confirmColor="#00754A"
          :columns="[cookieList]"
          keyName="unitName"
          title="请选择食堂"
          round="15rpx"
          @confirm="cookieSelect"
        ></uv-picker>
      </view>
    </cu-login>
  </view>
</template>

<script lang="ts" setup>
import { userRegister } from '@/service/business/login'
import { useUserStore } from '@/store'

import { getCurrentInstance } from 'vue'
import type { ComponentInternalInstance } from 'vue'
const { proxy } = getCurrentInstance() as ComponentInternalInstance
const userStore = useUserStore()

const registerOrgin = () => ({
  nickname: '',
  name: '',
  contact: '',
  password1: '',
  password2: '',
  unitCode: '',
  unitName: '',
})
const registerForm = ref(registerOrgin())

const disabled = ref(true)

// 校验表单项放开按钮状态
watch(
  registerForm,
  () => {
    disabled.value = !Object.values(registerForm.value).every((el) => el != '')
  },
  { deep: true },
)

const rules = ref({
  nickname: {
    type: 'string',
    required: true,
    min: 3,
    max: 6,
    message: '请填写3-6位字符',
    trigger: ['blur', 'change'],
  },
  name: {
    type: 'string',
    required: true,
    min: 3,
    max: 6,
    message: '请填写3-6位字符',
    trigger: ['blur', 'change'],
  },
  contact: [
    {
      type: 'number',
      required: true,
      message: '请填写手机号',
      trigger: ['blur', 'change'],
    },
    {
      pattern: /^(0[0-9]{2,3}-[0-9]{7,8})$|^1[3456789][0-9]{9}$/,
      message: '手机号格式错误',
      trigger: ['blur', 'change'],
    },
  ],
  password1: {
    type: 'string',
    required: true,
    min: 6,
    max: 10,
    message: '请填写6-10位字符',
    trigger: ['blur'],
  },
  password2: [
    {
      type: 'string',
      required: true,
      min: 6,
      max: 10,
      message: '请填写6-10位字符',
      trigger: ['blur'],
    },
    {
      // 自定义验证函数，见上说明，注意这里面的逻辑不能出现语法报错，否则可能导致不验证
      validator: (rule, value, callback) => {
        return value == registerForm.value.password1 ? true : false
      },
      message: '两次密码不一致',
      trigger: ['blur'],
    },
  ],
  unitName: {
    type: 'string',
    required: true,
    message: '请选择食堂',
    trigger: ['blur', 'change'],
  },
})

// 食堂列表
const cookieList = ref([])

const selectRef = ref(null)
const showAction = () => {
  selectRef.value.open()
}

// 选择食堂
const cookieSelect = (e) => {
  const { unitCode, unitName } = e.value[0]
  registerForm.value.unitCode = unitCode
  registerForm.value.unitName = unitName
}

// 登录
const register = () => {
  console.log(8888)
  uForm.value
    .validate()
    .then((res) => {
      userRegister(registerForm.value).then((res) => {
        if (res.retCode == 2000) {
          uni.showToast({
            title: '注册成功，即将跳转登录',
            icon: 'success',
          })
          setTimeout(() => {
            uni.redirectTo({
              url: '/pages/login/login',
            })
          }, 400)
        }
      })
    })
    .catch((err) => {})
}

onMounted(() => {
  proxy?.$global.getAllKitchen().then((res) => {
    cookieList.value = res
  })
})

const uForm = ref(null)
</script>

<style lang="scss" scoped>
.accountBox {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: #fff;
}
</style>
